<template>
	<view class="add-wearer">
		<view class="add-wearer-title">
			<text>佩戴者信息填写</text>
		</view>
		<scroll-view scroll-y style="width: 100%; padding: 20rpx; background-color: white; flex: 1; overflow: scroll; box-sizing: border-box;">
			<view style="display: flex;flex-direction: column;align-items: center;">
				<view class="add-wearer-row">
					<text class="label">佩戴者姓名</text>
					<input class="input" placeholder="请填写佩戴者真实姓名" v-model="name"/>
					<text v-if="nameError" class="error-hint">佩戴者姓名有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">预留手机号</text>
					<input class="input" placeholder="请填写佩戴者手机号" v-model="phone"/>
					<text v-if="phoneError" class="error-hint">预留手机号有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">佩戴者性别</text>
					<picker class="input" @change="genderChange" :value="genderIndex" :range="genders">
						<view class="pick-value" :class="{'has-value':genderIndex>=0}">{{genders[genderIndex] || "请选择性别"}}</view>
					</picker>
					<text v-if="genderError" class="error-hint">佩戴者性别有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">佩戴者年龄</text>
					<input class="input" placeholder="请填写佩戴者真实年龄" v-model="age"/>
					<text v-if="ageError" class="error-hint">佩戴者年龄有误</text>
				</view>
				<view class="add-wearer-row">
					<text class="label">关系设置</text>
					<picker class="input" @change="relationshipChange" :value="relationshipIndex" :range="relationships">
						<view class="pick-value" :class="{'has-value':relationshipIndex>=0}">{{relationships[relationshipIndex] || "请选择"}}</view>
					</picker>
					<text v-if="relationshipError" class="error-hint">关系设置有误</text>
				</view>
				<view class="btn-cancel" @click="cancel">
					<text>取消</text>
				</view>
				<view class="btn-save" @click="confirm">
					<text>保存</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { checkModbile } from '../pages/common/utils'
	export default {
		data() {
			return {
				name: '',
				nameError: false,
				phone: '',
				phoneError: false,
				genderIndex: -1,
				genders: ["男","女","未知"],
				genderError: false,
				age: '',
				ageError: false,
				relationshipIndex: -1,
				relationships: ["本人","父子","父女","母子","母女","其他"],
				relationshipError: false,
			}
		},
		methods: {
			checkError() {
				this.nameError = !(this.name.trim())
				this.phoneError = !checkModbile(this.phone.trim())
				this.genderError = this.genderIndex < 0
				// console.log(Number(this.age))
				this.ageError = this.age === '' || isNaN(Number(this.age))
				this.relationshipError = this.relationshipIndex < 0
			},
			genderChange(e) {
				this.genderIndex = e.detail.value;
			},
			relationshipChange(e) {
				this.relationshipIndex = e.detail.value;
			},
			cancel() {
				this.$emit("onCancel");
				this.reset();
			},
			confirm() {
				this.checkError()
				if (this.hasError) {
					return
				}
				this.$emit("onConfirm", {
					WearerName: this.name.trim(),
					Phone: this.phone.trim(),
					WearerSex: this.genders[this.genderIndex],
					WearerAge: Number(this.age),
					WeareaRelate: this.relationships[this.relationshipIndex],
				});
				this.reset();
			},
			reset() {
				this.name = ''
				this.phone = ''
				this.genderIndex = -1
				this.age = '',
				this.relationshipIndex = -1
				this.resetError();
			},
			resetError() {
				this.nameError = false
				this.phoneError = false
				this.genderError = false
				this.ageError = false
				this.relationshipError = false
			}
		},
		computed: {
			hasError() {
				return this.nameError || this.phoneError || this.genderError || this.ageError || this.relationshipError
			}
		},
	}
</script>

<style>
	.add-wearer {
		display: flex;
		flex-direction: column;
		font-family: "yshst" !important;
		width: calc(100vw - 70rpx);
		/* height: calc(100vh - 400rpx); */
		overflow: hidden;
		border-radius: 0 0 20rpx 20rpx;
	}
	.add-wearer-title {
		height: 80rpx;
		min-height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: aliceblue;
		border-radius: 20rpx 20rpx 0 0;
	}
	.add-wearer-row {
		height: 80rpx;
		min-height: 80rpx;
		display: flex;
		align-items: center;
		width: 100%;
		position: relative;
	}
	.add-wearer-row .two-values {
		display: flex;
		align-items: center;
		flex-direction: row;
		/* flex: 1; */
		justify-content: space-between;
		/* background-color: aquamarine; */
	}
	.two-values .two-values-input {
		width: 220rpx;
		/* background-color: aqua; */
	}
	.add-wearer-row .label {
		width: 180rpx;
		display: inline-block;
		/* background-color: aqua; */
	}
	.bind-lens {
		display: flex;
		flex-direction: row;
	}
	.bind-lens .label {
		width: 180rpx;
		display: inline-block;
		height: 80rpx;
		min-height: 80rpx;
		line-height: 80rpx;
	}
	.bind-lens-item {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 25rpx 0;
	}
	.add-wearer-row .input {
		flex: 1;
		/* background-color: red; */
		height: 100%;
		display: flex;
		align-items: center;
	}
	.add-wearer-row .pick-value {
		color: #999;
	}
	.add-wearer-row .pick-value.has-value {
		color: black;
	}
	.buy-ticket {
		width: calc(100% - 40rpx);
		height: 300rpx;
		border-radius: 25rpx;
	}
	.btn-save {
		height: 60rpx;
		width: 270rpx;
		background-color: #50c0f9;
		border-radius: 100rpx;
		font-size: 30rpx;
		display: flex;
		/* color: white; */
		align-items: center;
		justify-content: center;
		align-self: center;
		margin: 30rpx 0;
	}
	.btn-cancel {
		height: 60rpx;
		width: 270rpx;
		background-color: #d5d5d5;
		border-radius: 100rpx;
		font-size: 30rpx;
		display: flex;
		/* color: white; */
		align-items: center;
		justify-content: center;
		align-self: center;
		margin: 30rpx 0 0 0;
	}
	.error-hint {
		font-size: 20rpx;
		color: red;
		position: absolute;
		top: 60rpx;
		left: 180rpx;
	}
</style>